<template>
	<view>
		<view class="title">
			<view class="title-left">产品规格设置</view>
			<view class="button" @tap="addAttribute()">添加规格项目</view>
		</view>
		<view class="guige" v-for="(item, index) in attribute">
			<view class="guige-name">
				<u--input placeholder="请输入规格名" border="surround" v-model="item.name"></u--input>
				<!-- <view class="btn" @tap="addName"><u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon></view> -->
			</view>
			<view class="guige-value">
				<view class="tagList">
					<u-tag v-for="tag in item.value" :text="tag" type="success" plain size="large" closable @close="close(tag, index)" :customStyle="{ width: '50rpx' }"></u-tag>
				</view>
				<view class="inputValue">
					<u--input placeholder="请输入规格值" border="surround" :customStyle="{ borderRight: 'none' }" v-model="item.title"></u--input>
					<view class="btn" @tap="addValue(index)"><u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon></view>
				</view>
			</view>
			<view class="del" @tap="delAttribute(index)"><u-icon name="trash" color="red" size="28"></u-icon></view>
		</view>
		
		<view class="" style="margin:20rpx 0; " v-if="tableData.length>1">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;">
				<view class="" style="width: 22%;">
					<u--input placeholder="成交价"  v-model="value1" ></u--input>
				</view>
				<view class="" style="width: 22%;">
					<u--input placeholder="划线价" v-model="value2" ></u--input>
				</view>
				<view class="" style="width: 22%;">
					<u--input placeholder="库存"  v-model="value3" ></u--input>
				</view>
				<view class="" style="width: 22%;">
					<u-button @click="moreSet" type="primary" text="批量设置"></u-button>
				</view>
			</view>
			<!-- <view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="width: 45%;">
					<u--input placeholder="库存"  v-model="value3" ></u--input>
				</view>
				<view class="" style="width: 45%;">
					<u-button type="primary" text="批量设置"></u-button>
				</view>
			</view> -->
			
		</view>
		<view class="box" v-for="(item, indexx) in tableData">
			<view class="box-name" style="">
				{{
					item.specificationName
						.replace(/\"/g, '')
						.replace(/\{|}/g, '')
						.replace(/\,/g, '+')
				}}
			</view>
			<view class="box-title" style="">
				<view class="btn">成交价:</view>
				<u--input placeholder="请输入"  border="surround" v-model="item.dealPrice" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">划线价:</view>
				<u--input placeholder="请输入" type="number"  border="surround" v-model="item.scribePrice" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">库存:</view>
				<u--input placeholder="请输入" border="surround" v-model="item.stockNum" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">规格编号:</view>
				<u--input placeholder="请输入" border="surround" v-model="item.specificationNumber" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">库存位置:</view>
				<u--input placeholder="请输入" border="surround" v-model="item.position" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">图片:</view>
				<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-top: 10rpx;margin-left: 20rpx;">
					<view class="">
						<view class="" style="display: flex;flex-wrap: wrap;">
							<image
								v-if="item.specificationImages"
								style="width: 100rpx;height: 100rpx;margin-bottom: 20rpx;margin-right: 10rpx;"
								:src="item.specificationImages"
								@click="del(indexx)"
							></image>
							<view
								v-else
								@tap="changeImage(indexx)"
								style="width: 100rpx;height: 100rpx;background-color: #f5f5f5;display: flex;justify-content: center;align-content: center;margin-bottom: 10rpx;"
							>
								<u-icon name="photo" size="50"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- <u--input placeholder="" border="surround" v-model="item.specificationImages" :customStyle="{ borderLeft: 'none' }"></u--input> -->
			</view>
		</view>
		<view class="footer" v-if="tableData.length"><view class="footer-c" @tap="submit()">保存</view></view>
		<view class="footer" style="position: fixed;bottom: 20rpx;display: flex;justify-content: center;align-items: center;width: 100%;" v-else><view class="footer-c" @tap="submit()">保存</view></view>
	</view>
</template>

<script>
import {
	delPlugsGoodsSpecificationAll,
	uploadImages,
	insertPlugsGoodsAttributeKey,
	insertPlugsGoodsAttributeValue,
	insertPlugsGoodsSpecification,
	searchPlugsGoodsSpecificationByGoodsId
} from '../../../../utils/api.js';
export default {
	data() {
		return {
			close3: true,
			attribute: [
				// {
				// 	name: '颜色',
				// 	value: ['绿色', '黄色'],
				// 	title: '',
				// 	show: false
				// },
				// {
				// 	name: '大小',
				// 	value: ['大', '中'],
				// 	title: '',
				// 	show: false
				// }
			],
			tableData: [],
			goodsId: '',
			specificationInfo: [],
			value1:'',
			value2:'',
			value3:'',
		};
	},
	onLoad(option) {
		console.log(option.id, 444);
		if(option.id!='undefined'){
			this.goodsId = option.id;
			this.getguige();
		}
		
	},
	watch: {
		
		tableData: {
		          handler(val, oldval) {
						console.log(val,996545465);
						console.log(oldval,996545465);
						oldval.forEach((item) => {
						        this.tableData.forEach((element) => {
						          if (item.specificationName === element.specificationName) {
						            element.specificationName = item.specificationName;
						            element.scribePrice = item.scribePrice;
						            element.dealPrice = item.dealPrice;
						            element.stockNum = item.stockNum;
						            element.specificationNumber = item.specificationNumber;
						            element.specificationImages = item.specificationImages;
						            element.position = item.position;
						          }
						        });
						      });
		          },
		          deep: true
		        }
	},
	onShow() {},

	methods: {
		moreSet(){
			this.tableData.forEach(item=>{
				 item.dealPrice = this.value1;
				    item.scribePrice =this. value2;
				    item.stockNum = this.value3;
			})
		},
		getguige() {
			let data = {
				goodsId: this.goodsId
			};
			searchPlugsGoodsSpecificationByGoodsId(data).then(res => {
				if (res.code == 200) {
					if (res.body.specificationInfo.length !== 0) {
						let arr = [];
						this.specificationInfo = res.body.specificationInfo;
						for (let item of res.body.specificationInfo) {
							let obj1 = {
								name: Object.keys(item)[0],
								value: [],
								title: '',
								show: false,
								children: Object.values(item)[0]
							};
							console.log(item, 456);
							arr.push(obj1);
						}
						arr.forEach(item => {
							console.log(item.children, 7777);
							item.children.forEach(ress => {
								console.log(ress.attributeValue);
								item.value.push(ress.attributeValue);
							});
						});
						console.log(arr, 789);
						this.attribute = arr;
						let arr1 = [];
						res.body.plugsGoodsSpecificationList.forEach(item => {
							let obj2 = {
								specificationName: item.specificationName,
								scribePrice: item.scribePrice,
								dealPrice: item.dealPrice,
								stockNum: item.stockNum,
								specificationNumber: item.specificationNumber,
								specificationImages: item.specificationImages,
								position: item.position
							};
							arr1.push(obj2);
						});
						this.tableData = res.body.plugsGoodsSpecificationList;
					}
				}
			});
		},
		changeImage(index) {
			let that = this;
			console.log(this.tableData[index].specificationImages);
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
					let data = {
						file: res.tempFilePaths[0], //你要传的临时文件
						type: 1
					};
					uploadImages(data).then(ress => {
						if (ress.code == 200) {
							this.tableData[index].specificationImages = ress.body;
						}
					});
				}
			});
		},
		del(index) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '您确定要删除此图片吗？',
				cancelText: '取消', // 取消按钮的文字
				confirmText: '确定', // 确认按钮文字
				showCancel: true, // 是否显示取消按钮，默认为 true
				// confirmColor: '#f55850',
				// cancelColor: '#39B54A',
				success: res => {
					if (res.confirm) {
						//点击了确定
						this.tableData[index].specificationImages = '';
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
					} else {
						//点击了取消
					}
				}
			});
		},
		addAttribute() {
			let obj = {
				name: '',
				value: [],
				title: '',
				show: false
			};
			this.attribute.push(obj);
		},
		addValue(index) {
			if (this.attribute[index].name == '') {
				console.log(444);
				uni.showToast({
					icon: 'none',
					title: '规格名不能为空'
				});
				return;
			}
			if (this.attribute[index].title == '') {
				console.log(444);
				uni.showToast({
					icon: 'none',
					title: '规格值不能为空'
				});
				return;
			}
			this.attribute[index].value.push(this.attribute[index].title);
			this.attribute[index].title = '';
			console.log(this.attribute[index].title);
			console.log(this.attribute[index]);

			this.getTbable();
		},
		delAttribute(index) {
			this.attribute.splice(index, 1);
			if (this.attribute.length == 0) {
			    this.tableData = [];
			    // emit("success", guige.value, tableData.value);
			  } else {
			    this.getTbable();
			    // emit("success", guige.value, tableData.value);
			  }
			
		},
		getTbable() {
			let obj = {};
			for (let sum = 0; sum < this.attribute.length; sum++) {
				obj[this.attribute[sum].name] = this.attribute[sum].value;
			}
			this.tableData = this.permutation(obj);
			let arr = [];
			this.tableData.forEach((item, index) => {
				console.log(JSON.stringify(item));
				let name = {
					specificationName: ''
				};
				name.specificationName = JSON.stringify(item);
				arr.push(name);
			});

			arr.forEach((item, index) => {
				item.scribePrice = '';
				item.dealPrice = '';
				item.stockNum = '';
				item.specificationNumber = '';
				item.specificationImages = '';
				item.position = '';
				item.goodsId = this.goodsId;
			});
			this.tableData = arr;
		},
		close(tag, index) {
			console.log(tag, index);
			this.attribute[index].value.splice(this.attribute[index].value.indexOf(tag), 1);
			this.getTbable();
		},

		// 数据组合方法
		permutation(source) {
			const result = [];
			const _result = {};
			const convert = (arr, index) => {
				for (let i = 0; i < source[arr[index]].length; i++) {
					if (source[arr[index]][i]) {
						_result[arr[index]] = source[arr[index]][i];
						if (index === arr.length - 1) {
							result.push(JSON.parse(JSON.stringify(_result)));
						} else {
							convert(arr, index + 1);
						}
					}
				}
			};
			convert(Object.keys(source), 0);

			return result;
		},

		submit() {
			uni.$emit('skuData', this.attribute, this.tableData);
			uni.navigateBack();
			
		}
	}
};
</script>

<style lang="scss">
page {
	padding: 20rpx;
	box-sizing: border-box;
}
.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
	font-size: 26rpx;
	.title-left {
		font-weight: 700;
	}
	.button {
		width: 250rpx;
		color: #fff;
		background-color: #016eff;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 20rpx;
	}
}
.guige {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	position: relative;
	.guige-name {
		display: flex;
		align-items: center;
		width: 500rpx;
		.btn {
			width: 100rpx;
			color: #fff;
			height: 70rpx;
			font-size: 26rpx;
			background-color: #efefef;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.guige-value {
		margin-top: 20rpx;
		.tagList {
			display: flex;
			align-items: center;
		}
		.inputValue {
			display: flex;
			align-items: center;
			width: 650rpx;
			margin-top: 20rpx;
			.btn {
				width: 100rpx;
				color: #fff;
				height: 70rpx;
				font-size: 26rpx;
				background-color: #efefef;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.del {
		position: absolute;
		top: 30rpx;
		right: 25rpx;
	}
}
.box {
	.box-name {
		padding: 20rpx;
		text-align: center;
	}
	.box-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.btn {
			width: 150rpx;
			height: 70rpx;
			font-size: 26rpx;
			background-color: #efefef;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	.footer-c {
		width: 500rpx;
		background-color: #016eff;
		color: #fff;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
